<!-- <template>
  <el-calendar :first-day-of-week="1" :date-cell-render="dateCellRender">
    <template #dateCell="{date, data}">
      <p>
        {{ data.day.split('-').slice(2).join('-') }}
      </p>
      <div class="custom-date-content">
        <template v-for="(item, index) in getDateContent[data]">
          <span>{{item}} </span>
          <span v-if="getDateContent(date).length>0">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(date)"></el-button>
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(date)"></el-button>
          </span>
        </template>

      </div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      // 假设这是你要显示的日程数据
      events: {
        '2024-8-1': ['事件1', '事件2'],
        '2024-8-5': ['事件2','事件4'],
        // ...更多日期的事件
      },
      // 假数据
      schedules: [
        { date: '2024-08-01', content: '会议1' },
        { date: '2024-08-01', content: '会议2' },
        { date: '2024-08-02', content: '休息日' },
      ],
      DataList:[]
    };
  },
  computed: {
    groupedSchedules() {
      return this.schedules.reduce((acc, item) => {
        const date = item.date;
        if (!acc[date]) {
          acc[date] = [];
        }
        acc[date].push(item.content);
        return acc;
      }, {});
    },
  },
  mounted() {
    // this.getList()
  },
  methods: {
    dateCellRender({ date, data }) {
      const daySchedules = this.groupedSchedules[date.toISOString().substring(0, 10)];
      if (daySchedules && daySchedules.length > 0) {
        // 如果有日程，显示日程列表
        return (
          <div class="custom-date-cell">
            {daySchedules.map(schedule => (
              <div class="schedule-item">{schedule}</div>
            ))}
          </div>
        );
      }
      // 如果没有日程，返回 null 或空字符串
      return '';
    },
  },

    // getList(){
    //   this.DataList = this.groupedSchedules[date.toISOString().substring(0, 10)];
    //   console.log(this.DataList)
    // },
    getDateContent(date) {
      const dateStr = this.formatDate(date);
      // var list = [{

      // }]
      return this.events[dateStr] || '';
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    handleEdit(date) {
      // 处理编辑事件
      console.log(`编辑日期: ${this.formatDate(date)}`);
    },
    handleView(date) {
      // 处理查看事件
      console.log(`查看日期: ${this.formatDate(date)}`);
    }
  }
};
</script>

<style scoped lang="scss">
/* .custom-date-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
} */
::v-deep .el-calendar-table thead th:before {
  content: "周";
}
</style> -->
